<!doctype html>
<html>
    <head>
        <title>样本入组-安平县全员核酸检测采集系统</title>
    
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
        <link rel="stylesheet" href="layui.css" media="all">
        <script src="layui.js"></script>
        <script src="jquery.1.12.4.js"></script>
        <style>
            .error{
                font-size: 18px;
                color: #999;
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100px;
            }
            .error a{
                color: blue;
            }
            .h1{
                font-size: 24px;
                text-align: center;
                margin: 50px 0 20px 0;
            }
            .copy{
                text-align: center;
                padding: 20px 0;
                line-height: 30px;
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
            }
            .zhanweifu{
                padding: 20px 0;
            }
            #main{
                width: 345px;
                margin: 0 auto;
     
            }
            #main ul{
                padding: 15px 0;
            }
            #main ul li{
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 50px;
                padding: 0 15px;
                border-bottom: 1px solid #f1f1f1;
                color: #666;
            }
            #main ul li.ac{
                color: #009688;
            }
            #main ul li .title{
                font-size: 18px;
            }
            #main ul li .duihao img{
                width: 20px;
                height: 20px;
            }
            #main ul li .duihao .img_ok{
                display: none;
            }
            .button{
                width: 345px;
                height: 50px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                margin-top: 30px;
            }

            /*弹窗*/
            #black{
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity: 0.3;
                position: fixed;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                display: none;
            }
            #error{
                display: none;
                width: 340px;
                height: 340px;
                background-color: #fff;
                position: fixed;
                z-index: 2;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
                border-radius: 10px;
            }
            .errorImg{
                display: flex;
                justify-content: center;
                align-items: center;
                height: 180px;
            }
            .errorTitle{
                text-align: center;
                font-size: 20px;
                margin: 24px 0;
            }
            .errorBtn{
                width: 230px;
                height: 50px;
                background-color: #009a88;
                color: #fff;
                
                margin: 0 auto;
            }
            .baifenbai{
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 20px;
            }
            .deBug{
                margin: 10px 0;
                color: #999;
            }

            .deBugP{
                margin-bottom: 5px;
            }
            #tubeP{
                color: red;
            }
            #errorP{
                color: #f1f1f1;
            }
        </style>
    </head>
    <body>
		<div id="black"></div>
		<div id="error">
            <div class="errorImg"><img src="error.png" width="180" height="140" /></div>
            <div class="errorTitle">失败，请选择人员入组！</div>
            <div class="errorBtn">
                <span onlick="Close()">点击关闭</span>
            </div>
		</div>
        <div id="main">
            <div class="h1">选择人员</div>
            <!--样本入组 检验登记 结果查询-->
            <ul>
                <!-- <li _uId="333222" _key="0">
                    <div class="title">马万里</div>
                    <div class="duihao">
                        <img src="duihao_no.png" class="img_no" />
                        <img src="duihao_ok.png" class="img_ok" />
                    </div>
                </li> -->
            </ul>
            <div class="error">
                加载中...
            </div>
            <div class="button layui-btn" _key="0" style="font-size: 20px;">提交</div>

            <div id="xinxi" style="margin-top: 30px;">
                <div id="errorP" class="deBug"></div>
                <div id="codeP" class="deBug"></div>
                <div id="tubeP" class="deBug"></div>
                <div id="userP" class="deBug"></div>
            </div>
        </div>

        <div class="zhanweifu">&nbsp;</div>
        <div class="copy">
            <p>安平县新冠肺炎疫情防控工作指挥部</p>
            <p>技术支持：智慧安平</p>
        </div>

        
        <script>

            // 获取URL里的参数函数
            function getQueryString(name){
                var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r!=null)return  unescape(r[2]); return null;
            }

            // Tanchuang('失败，请选择人员入组！', '点击关闭', 1);
            // 弹窗
            function Tanchuang (str, btnStr, num) {
                var black = $("#black");
                var box = $("#error");
                $(".errorTitle").html(str);
                if(num == 1){
                    // 关闭窗口
                    $(".errorBtn").html("<div class='baifenbai closeError'>"+btnStr+"</div>");
                    $(".closeError").click(function(){
                        var black = $("#black");
                        var box = $("#error");
                        black.fadeOut(500);
                        box.fadeOut(500);
                    });
                }
                if(num == 2){
                    // 跳转链接
                    $(".errorBtn").html("<div class='baifenbai linkUrl'>"+btnStr+"</div>");
                    $(".linkUrl").click(function(){
                        $(location).attr('href', 'http://api.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url=http://hesuan.city1000.cn');
                    });
                }
                
                black.fadeIn(500);
                box.fadeIn(500);
            }

            $("#main ul").hide();
            $(".error").show();
            $(".button").hide();
            layui.use(['layer'], function(){
                var layer = layui.layer //弹层

                var testingUrl = "http://user.city1000.cn:9999/hesuan/tubeUser/insertRecord";

                // 获取数据
                var state = getQueryString('state');
                // 字符串转数组
                var stateArr = state.split(',');


                // 测试state的数量
                //$("#errorP").html(stateArr.length);
            
                if(stateArr.length > 2){
                    /***************/
                    // 从网址获取code和试管编号
                    var code = getQueryString('code');
                    // 获取试管编号
                    var tubeId = stateArr[1];
                    // 获取用户ID
                    var userIds = stateArr.splice(2);
                    //$("#errorP").html("code="+code+"——tubeId="+tubeId+"——userIds="+userIds);
            
                    $.ajax({
                        url: testingUrl,
                        type: "GET",
                        dataType: 'json',
                        data: {
                            'wxcode': code,
                            'tubeId': tubeId,
                            'userId': userIds.join(',')
                        },
                        success: function (data) {
                            // 成功
                            if(data.code == 0){
                                //Tanchuang(data.msg, '返回首页', 2);
                                //console.log("暂无数据")
                              	//layer.msg('入组成功，即将跳转查询结果！', {icon:1,time:2000},function(){
								//	window.location.href='http://user.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url=http://hesuan.city1000.cn/input_idcard.html'
								//});
                                layer.alert(`<div style='text-align:center'>入组成功</div><div style='text-align:center'>试管编号:${tubeId}</div><div style='text-align:center'>请把此信息展示给现场工作人员</div>`, {title:"提示"},function () {
									window.location.href = 'http://user.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url=http://hesuan.city1000.cn/input_idcard.html'
								});
                            }
                            // 失败
                            else{
                                Tanchuang(data.msg, '点击重试', 2);
                                ts.attr("_key", 0);
                                ts.css({
                                    "background-color": "#009688"
                                })
                            }
                        },
                        error: function (err) {
                            $("#codeP").html(err);
                            console.log(err)
                        }
                    });

                    /***************/
                }else{
                    /***************/
                    // 拉取用户信息
                    var userUrl = "http://user.city1000.cn:9999/hesuan/hsUser/getUsers";

                    // 从网址获取code和试管编号
                    var code = getQueryString('code');
                    var btnState = getQueryString('state');
                    $("#errorP").html(btnState);

                    if(code == null || code == "" || code == undefined){
                        $("#main .h1").html('<div style="padding:10px;font-size:12px">请您通过公众号搜索<span style="color:red">"智慧安平"</span>或<span style="color:red">"健康网都"</span>进入,点击更多精彩,全员核酸采集系统进入</div>');
                        $("#main ul").hide();
                        $(".error").hide();
                        $(".button").hide();
                        return false;
                    }
                    if(btnState == null || btnState == "" || btnState == undefined){
                        $("#main .h1").html('<div style="padding:10px;font-size:12px">请您通过公众号搜索<span style="color:red">"智慧安平"</span>或<span style="color:red">"健康网都"</span>进入,点击更多精彩,全员核酸采集系统进入</div>');
                        $("#main ul").hide();
                        $(".error").hide();
                        $(".button").hide();
                        return false;
                    }
                    
                    // 字符串转数组
                    var tubeIdArr = btnState.split(',');
                    // 获取值
                    var tubeId = tubeIdArr[1];
        
                    console.log("code："+code)
                    console.log("tubeId："+tubeId)
                        
                    // 从服务器拉取数据
                    $.ajax({
                        headers: {
                        },
                        url: userUrl,
                        type: "GET",
                        dataType: 'json',
                        data: {
                            'wxcode': code
                        },
                        success: function (data) {
                            

                            if(data.code == 0){
                                if(data.data.length > 0){
                                    $("#main ul").show();
                                    $(".error").hide();
                                    $(".button").show();
                                    console.log(data)

                                    var dArr = [];
                                    // 筛选数组，将istrue为0的值取出存入dArr
                                    for(var i=0; i<data.data.length; i++){
                                        if(data.data[i].istrue == 0){
                                            dArr.push(data.data[i]);        
                                        }
                                    }
                                    
                                    if(dArr.length <= 0){
                                        Tanchuang("暂无可选人员", '返回首页', 2);
                                        return false;
                                    }
                                    
                                    // 创建
                                    for(var a=0; a<dArr.length; a++){
                                        var li = "<li _uId="+dArr[a].id+" _key='0'><div class='title'>"+dArr[a].name+"</div><div class='duihao'><img src='yuan.png' class='img_no' /><img src='yuan_ac.png' class='img_ok' /></div></li>";
                                        
                                        $("#main ul").append(li);
                                    }

                                    /*选择 or 取消选择*/
                                    var ul = $("#main ul");
                                    var li = ul.find("li");
                                    var arr = [];
                                    var userArr = [];
                            
                                    
                                    $("#tubeP").html("试管编号："+tubeId);
                                    li.click(function(){
                                        var ts = $(this)
                                        var tsVal = ts.attr("_uId");
                                    
                                        // 取消选中
                                        if(ts.attr("_key") == 1){
                                            ts.removeClass("ac");
                                            ts.find(".img_no").show();
                                            ts.find(".img_ok").hide();
                                            ts.attr("_key", 0);

                                            /* 删除指定数组值 */
                                            var index = arr.indexOf(ts.attr("_uId"));

                                            arr.splice(index, 1);

                                            // 测试用
                                            // 用户删除操作
                                            userArr.splice(index, 1);
                                            $("#userP").html("");
                                            for(var i=0; i<arr.length; i++){
                                                var pBox = "<p class='deBugP'>"+userArr[i]+'，'+arr[i]+"</p>";
                                                $("#userP").append(pBox);
                                            }
                                            
                                            $(".button").attr("_key", 0);
                            
                                        }
                                        // 选中
                                        else{
                                            ts.addClass("ac");
                                            ts.find(".img_no").hide();
                                            ts.find(".img_ok").show();
                                            ts.attr("_key", 1);
                                            
                                            arr.push(ts.attr("_uId"));

                                            $(".button").attr("_key", 0);

                                            // 测试用
                                            // 储存用户
                                            userArr.push(ts.find(".title").html());
                                            $("#userP").html("");
                                            for(var i=0; i<arr.length; i++){
                                                var pBox = "<p class='deBugP'>"+userArr[i]+'，'+arr[i]+"</p>";
                                                $("#userP").append(pBox);
                                            }
                            
                                        }
                                    });
                                    /**/
                                    
                                    var btn = $(".button");
                                    btn.unbind("click");
                                    btn.click(function(){
                                        var ts = $(this);

                                       
                                        // 判断是否选择
                                        if(arr.length <= 0){
                                            Tanchuang('请选择人员入组！', '点击关闭', 1);
                                        }else{

                                            $(location).attr('href', 'http://user.city1000.cn:9999/weixin/wechat/h5/redirectSomeWhere?url=http://hesuan.city1000.cn/testing/testing.html&data='+btnState+','+arr.join(','));
                                        } 
                                    })
                                    
                                }else{
                                    Tanchuang("暂无可选人员", '返回首页', 2);
                                    console.log("暂无数据")
                                   
                                }
                            }else{
                                Tanchuang('当前访问人数过多', '点击重试', 2);
                            }
                        },
                        error: function (err) {
                            $("#codeP").html(err);
                            console.log(err)
                        }
                    });
                    /***************/
                }
            });
        </script>
    </body>
</html>